import { PROJECT_PREFIX } from '../base'

/**
 * 滚动条样式服务类
 */
export class ScrollStylesService {
  private static instance: ScrollStylesService

  static getInstance(): ScrollStylesService {
    if (!ScrollStylesService.instance) {
      ScrollStylesService.instance = new ScrollStylesService()
    }

    return ScrollStylesService.instance
  }

  get default(): string {
    return `
/* 基础滚动条样式 */
&::-webkit-scrollbar {
  -webkit-appearance: none !important;
  width: var(--${PROJECT_PREFIX}-theme-scrollbar-vertical-width) !important;  /* 垂直滚动条宽度 */
  min-width: var(--${PROJECT_PREFIX}-theme-scrollbar-vertical-width) !important;
  max-width: var(--${PROJECT_PREFIX}-theme-scrollbar-vertical-width) !important;
  height: var(--${PROJECT_PREFIX}-theme-scrollbar-vertical-width) !important; /* 水平滚动条高度 */
  margin-left: var(--${PROJECT_PREFIX}-theme-scrollbar-margin-left) !important;
}

/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
  background-color: var(--${PROJECT_PREFIX}-theme-scrollbar-thumb-bg) !important;
  background-clip: content-box !important; /* 限制背景范围 */
  border: 1px solid var(--${PROJECT_PREFIX}-theme-scrollbar-thumb-border-color) !important;
  border-radius: var(--${PROJECT_PREFIX}-theme-scrollbar-radius) !important;
}

/* 滚动条轨道 */
&::-webkit-scrollbar-track {
  background-color: var(--${PROJECT_PREFIX}-theme-scrollbar-track-bg) !important;
  border-radius: var(--${PROJECT_PREFIX}-theme-scrollbar-radius) !important;
}

/* 横向滚动条特殊样式 */
&::-webkit-scrollbar:horizontal {
  height: var(--${PROJECT_PREFIX}-theme-scrollbar-horizontal-width) !important;
  min-height: var(--${PROJECT_PREFIX}-theme-scrollbar-horizontal-width) !important;
  max-height: var(--${PROJECT_PREFIX}-theme-scrollbar-horizontal-width) !important;
}

/* 兼容 Firefox */
scrollbar-width: thin !important;
scrollbar-color: var(--${PROJECT_PREFIX}-theme-scrollbar-thumb-bg) var(--${PROJECT_PREFIX}-theme-scrollbar-track-bg) !important;
  `
  }
}
